import { Table, Popconfirm, Tag, Card } from "antd";
import { ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { useModel } from "umi";
import { useReactive } from "ahooks";

const OrganizationServices = () => {
    const { organizationServices, loadOrganizationServices, changeServiceStatus, stopService, deleteService } = useModel("gateway.info");

    const state = useReactive({
        submitLoading: false,
    });

    return (
        <Card
            bordered={true}
            hoverable
            title="服务信息"
            size="small"
            style={{ marginBottom: 16 }}
            bodyStyle={{ padding: 0 }}
            extra={
                <ButtonGroup>
                    <Button icon={<IconRefresh />} onClick={loadOrganizationServices}></Button>
                </ButtonGroup>
            }
        >
            <Table size="small" bordered={false} pagination={false} dataSource={organizationServices} rowKey={"serviceUuid"} style={{ marginTop: 0 }}>
                <Table.Column title="序号" width={60} align="center" render={(_, r, i) => i + 1} />
                <Table.Column title="服务名" dataIndex="serviceName" align="left" width={160} />
                <Table.Column title="服务类型" dataIndex="serviceType" align="center" width={80} />
                <Table.Column
                    title="服务地址"
                    align="left"
                    render={(_, record) => {
                        let url = record.serviceProtocol + record.serviceHost + ":" + record.servicePort;
                        return url;
                    }}
                />
                <Table.Column
                    title="启用状态"
                    align="center"
                    width={80}
                    render={(_, record) => {
                        if (record.serviceStatus) {
                            return (
                                <Popconfirm
                                    title="确认要关闭该组织服务吗?"
                                    okButtonProps={{ loading: state.submitLoading }}
                                    onConfirm={(e) => {
                                        state.submitLoading = true;
                                        changeServiceStatus(record.serviceUuid, false);
                                        state.submitLoading = false;
                                    }}
                                >
                                    <Tag color="#87d068">启用</Tag>
                                </Popconfirm>
                            );
                        } else {
                            return (
                                <Popconfirm
                                    title="确认要打开该组织服务吗?"
                                    okButtonProps={{ loading: state.submitLoading }}
                                    onConfirm={(e) => {
                                        state.submitLoading = true;
                                        changeServiceStatus(record.serviceUuid, true);
                                        state.submitLoading = false;
                                    }}
                                >
                                    <Tag color="#f50">未启用</Tag>
                                </Popconfirm>
                            );
                        }
                    }}
                />
                <Table.Column
                    title="运行状态"
                    align="center"
                    width={140}
                    render={(_, record) => {
                        if (record.serviceRunning) {
                            return (
                                <span>
                                    <span style={{ color: "#87d068" }}>运行中</span>(
                                    <Popconfirm
                                        title="确认要停止该组织数据服务吗?"
                                        okButtonProps={{ loading: state.submitLoading }}
                                        placement="topRight"
                                        onConfirm={(e) => {
                                            state.submitLoading = true;
                                            stopService(record.serviceUuid);
                                            state.submitLoading = false;
                                        }}
                                    >
                                        <a>停止服务</a>
                                    </Popconfirm>
                                    )
                                </span>
                            );
                        } else {
                            return (
                                <span>
                                    <span style={{ color: "#f50" }}>未运行</span>(
                                    <Popconfirm
                                        title="确认要删除该组织数据服务吗?"
                                        okButtonProps={{ loading: state.submitLoading }}
                                        placement="topRight"
                                        onConfirm={(e) => {
                                            state.submitLoading = true;
                                            deleteService(record.serviceUuid);
                                            state.submitLoading = false;
                                        }}
                                    >
                                        <a>删除服务</a>
                                    </Popconfirm>
                                    )
                                </span>
                            );
                        }
                    }}
                />
            </Table>
        </Card>
    );
};

export default OrganizationServices;
